<template>
  <!-- 发送验证码按钮组件 -->
  <view class="send_message_comp">
    <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange" :start-text="this.startText" :change-text="changeText"></u-verification-code>
    <u-button type="primary" class="btn" :class="canGetCode ?'' : 'btn_disabled'" @click="sendMessage">{{tips}}</u-button>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    sendType: { // 获取验证码接口类型，register注册接口，changemobile修改手机
      type: String,
      default: 'register'
    },
    mobile: {
      type: String,
      default: ''
    },
    seconds: { // 倒计时长
      type: Number,
      default: 60
    },
  },
  data() {
    return {
      tips: '', // 视图层按钮提示文字
      canGetCode: true, // 当前是否允许获取验证码
      startText: '获取验证码',
      changeText: '重新发送 (X)', // 倒计时期间的提示语，必须带有字母"X"
    };
  },
  computed:{
  },
  created() {},
  methods: {
    sendMessage() {
      console.log(this.mobile);
      if(!this.mobile || !/^1[3456789]\d{9}$/.test(this.mobile)){
        uni.showToast({
          icon: 'none',
          title: '请输入正确的手机号码',
        })
        return
      }
      if (this.$refs.uCode.canGetCode) { // 允许发送验证码
        this.getCode(this.sendType)
      }
    },
    end() {
      // 倒计时结束
      this.canGetCode = true
    },
    start() {
      // 倒计时开始
      this.canGetCode = false
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode(event){
      // 获取手机短信
      this.$api.message.send({
        mobile: this.mobile,
        event: event,
      }).then(res =>{
        uni.showToast({
          icon: 'none',
          title: '验证码发送成功，请注意查收'
        });
        this.$refs.uCode.start();
      })
    },
  }
};
</script>

<style scoped lang="scss">
.send_message_comp {
  display: inline-block;
  vertical-align: middle;
  .btn {
    width: 180rpx;
    height: 80rpx;
    background: #4C9AF5;
    border-radius: 12rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 40rpx;
  }
  .btn_disabled {
    background: #E0EEFF;
    border-radius: 12rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #4D9AF5;
    line-height: 40rpx;
  }
}
</style>
